<template>
    <div>
        <span type="primary" @click='showForget' >
            忘记密码
        </span>
        <a-modal
                :footer="null"
                :visible="visible"
                :confirm-loading="confirmLoading"
                @ok="handleOk"
                @cancel="handleCancel"
        >
            <p  class="offers">忘记密码</p>
            <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
                <a-input
                        style="width: 100%;margin-bottom: 10px"
                        v-decorator="[
          '请输入账号',
          { rules: [{ required: checkNick, message: '请输入账号' }] },
        ]"
                        placeholder="请输入账号"
                />

                    <a-input-password style="width: 100%;margin-bottom: 20px" placeholder="请输入密码" />


                    <a-input-password style="width: 100%;margin-bottom: 20px" placeholder="请输入新密码" />

                <a-input
                        style="width: 100%;margin-bottom:20px "
                        v-decorator="[
          '请输入手机号',
          { rules: [{ required: checkNick, message: '请输入手机号' }] },
        ]"
                        placeholder="请输入手机号"
                />
                <a-input
                        style="width: 58%;margin-bottom: 20px"
                        v-decorator="[
          '请输入验证码',
          { rules: [{ required: checkNick, message: '请输入验证码' }] },
        ]"
                        placeholder="请输入验证码"
                />
                <a-button style="width: 40%;margin-left: 2%" type="primary">
                    获取验证码
                </a-button>

                <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                  <div>
                      <a-button class="offersNow" type="primary" html-type="submit">
                          确认更改
                      </a-button>
                  </div>
                    <ul>
                    <li style="float: left"><register></register></li>
                    <li @click="showoffers" style="float: right">去登录</li>
                    </ul>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import register from "./register";
    export default {
        name: "forgotPassword",
        data() {
            return {
                checkNick:'',
                formLayout: 'horizontal',
                form: this.$form.createForm(this, { name: 'coordinated' }),
                // ModalText: 'Content of the modal',
                visible: false,
                confirmLoading: false,
            };
        },
        components:{register},
        methods: {
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                    }
                });
            },
            handleSelectChange(value) {
                console.log(value);
                this.form.setFieldsValue({
                    note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
                });
            },

            showForget() {
                this.visible = true;
                this.$store.commit('changelogin',false)
            },
            showOffers() {
                this.visible = false;
                this.$store.commit('changelogin',false)
            },
            showoffers(){
                this.visible = false;
                this.$store.commit('changelogin',true)
            },
            handleOk() {
                this.ModalText = 'The modal will be closed after two seconds';
                this.confirmLoading = true;
                setTimeout(() => {
                    this.visible = false;
                    this.confirmLoading = false;
                }, 2000);
            },
            handleCancel() {
                console.log('Clicked cancel button');
                this.visible = false;
            },
        },

    }
</script>

<style scoped lang="less">
    /deep/.ant-input-affix-wrapper .ant-input{
        width: 100%;
    }
    /deep/.ant-input{
        width: 70%;
    }
    /deep/.ant-modal-content{
        width: 360px;
    }
    /deep/.ant-col-12{
        width: 70%;
    }
    /*立即注册按钮*/
    .offersNow{
        width: 55%;
        margin-left: -48px;

    }
    /* 顶部注册标题*/
    .offers{
        margin: 10px auto;
        text-align: center;
        width: 154px;
        height: 36px;

    }


</style>